<template>
	<view class="mine">
		<view class="header">
			<view class="userImage" @click="chooseAvatar">
				<view v-if="avatar">
					<image :src="avatar" mode="widthFix"></image>
				</view>
				<view v-else>
					<image src="/static/null-avatar.jpg" mode="widthFix"></image>
				</view>
			</view>
			<view class="header-person">
				<view>{{vuex_user.username}}</view>
				<view>{{vuex_user.phone}}</view>
			</view>
		</view>
		<view class="able">
			<navigator class="able-person" url="person/person">
				<text>个人信息</text>
			</navigator>
			<view style="height: 2rpx;width: 100%;background-color: #eee;"></view>
			<navigator url="/pages/mine/apply/apply" class="able-apply" v-if="vuex_user.permission===1">
				<text>申请估价</text>
			</navigator>
			<view style="height: 2rpx;width: 100%;background-color: #eee;"></view>
			<navigator class="able-apply" url="/pages/mine/look/look" v-if="vuex_user.permission===1">
				<text>查看申请</text>
			</navigator>
			<view style="height: 2rpx;width: 100%;background-color: #eee;"></view>
			<view class="able-us" @click="contactUs">
				<text>联系我们</text>
			</view>
		</view>

		<view class="login-out">
			<u-button size="default" shape="circle" :ripple="true" type="primary" @click="loginOut()">退出登录
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: 'https://cdn.uviewui.com/uview/common/logo.png'
			};
		},
		methods: {
			contactUs() {
				uni.makePhoneCall({
					phoneNumber: '15651519277'
				});
			},
			// 退出登录
			loginOut() {
				this.$u.vuex('vuex_token', "");
				this.$u.vuex('vuex_user', {});
				uni.reLaunch({
					url: '/pages/login-reg/login'
				})
			},
			// 裁剪头像
			chooseAvatar() {
				this.$u.route({
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
		},
		created() {
			let that = this
			this.avatar = this.vuex_user.avatar_url
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				this.avatar = path;
				// 可以在此上传到服务端
				uni.uploadFile({
					url: 'https://dc.huan-sha.net/api/upload/picture',
					filePath: path,
					name: 'picture',
					header: {
						'Authorization': "Bearer " + this.vuex_token
					},
					complete: (res, index) => {
						// 缓存修改好的图片
						this.$u.vuex('vuex_user', {
							...that.vuex_user,
							avatar_url: that.avatar
						});
						that.$u.api.updateUserInfo({
							id: this.vuex_user.id,
							avatar_url: that.avatar
						}).then(res => {
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							})
						})
					}
				});
			})
		},
	}
</script>

<style lang="scss" scope>
	.mine {
		min-height: 100vh;
		background-color: #f8f8f8;

		.header {
			border: 30rpx solid lightskyblue;
			border-radius: 0 0 60rpx 60rpx;
			padding: 40rpx;
			display: flex;

			.userImage {

				image {
					border-radius: 50%;
					border: 4rpx solid #fff;
					width: 200rpx;
					height: 200rpx;
				}
			}

			.header-person {
				margin: 40rpx;
				width: 100%;
				background-color: #fff;
				line-height: 80rpx;
				font-size: 30rpx;
				border-radius: 20rpx;
				padding: 0 40rpx;
			}
		}

		.able {
			background-color: #fff;
			border-radius: 40rpx;
			border: 4rpx solid #eee;
			margin: 40rpx;
			text-align: center;
			font-size: 30rpx;

			.able-us,
			.able-person,
			.able-apply {
				padding: 20rpx;
			}
		}

		.login-out {
			position: fixed;
			bottom: 100rpx;
			left: 60rpx;
			right: 60rpx;
		}
	}
</style>
